<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建密码 - 声破天</title>
    <link rel="stylesheet" href="assets/css/login.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <div class="container">
        <header>
            <div class="logo">
                <a href="index.html" title="index">
                    <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="25" cy="25" r="20" fill="#1DB954" />
                        <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2"
                            fill="none" />
                        <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2"
                            fill="none" />
                        <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2"
                            fill="none" />
                        <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
                            fill="#ffffff">声破天</text>
                    </svg>
                </a>
            </div>
        </header>

        <main class="signup-form password-form">
            <h1>创建密码</h1>

            <form action="#" method="POST" id="password-form">
                <div class="email-display">
                    <p>您将使用此邮箱登录：<span id="user-email">example@email.com</span></p>
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" placeholder="创建密码" required minlength="8">
                    <div class="password-strength">
                        <div class="strength-bar">
                            <div class="strength-indicator"></div>
                        </div>
                        <p class="strength-text">密码强度: <span>弱</span></p>
                    </div>
                </div>

                <div class="form-group">
                    <label for="confirm-password">确认密码</label>
                    <input type="password" id="confirm-password" name="confirm-password" placeholder="再次输入密码" required
                        minlength="8">
                    <p class="password-match-text"></p>
                </div>

                <div class="form-group checkbox-group">
                    <label class="checkbox-label">
                        <input type="checkbox" id="terms" name="terms" required>
                        <span>我同意<a href="#">服务条款</a>和<a href="#">隐私政策</a></span>
                    </label>
                </div>

                <button type="submit" class="btn btn-primary">创建账号</button>

                <div class="back-link">
                    <a href="register.html"><i class="fas fa-arrow-left"></i> 返回</a>
                </div>
            </form>

            <div class="legal-text">
                <p>本网站受 reCAPTCHA 保护，适用 Google <a href="#">隐私政策</a>和<a href="#">服务条款</a>。</p>
            </div>
        </main>
    </div>

    <script src="assets/js/login.js"></script>
    <script>
        // 获取URL参数中的邮箱地址
        document.addEventListener('DOMContentLoaded', function () {
            const urlParams = new URLSearchParams(window.location.search);
            const email = urlParams.get('email');

            if (email) {
                document.getElementById('user-email').textContent = email;
            }

            // 密码强度检测
            const passwordInput = document.getElementById('password');
            const strengthIndicator = document.querySelector('.strength-indicator');
            const strengthText = document.querySelector('.strength-text span');

            passwordInput.addEventListener('input', function () {
                const strength = checkPasswordStrength(this.value);

                // 更新强度指示器
                strengthIndicator.style.width = `${strength.percent}%`;
                strengthIndicator.style.backgroundColor = strength.color;
                strengthText.textContent = strength.text;
                strengthText.style.color = strength.color;
            });

            // 密码匹配检测
            const confirmPasswordInput = document.getElementById('confirm-password');
            const matchText = document.querySelector('.password-match-text');

            confirmPasswordInput.addEventListener('input', function () {
                if (this.value === '') {
                    matchText.textContent = '';
                    return;
                }

                if (this.value === passwordInput.value) {
                    matchText.textContent = '密码匹配';
                    matchText.style.color = '#1DB954';
                } else {
                    matchText.textContent = '密码不匹配';
                    matchText.style.color = '#ff4d4f';
                }
            });

            // 表单提交
            const form = document.getElementById('password-form');
            form.addEventListener('submit', function (e) {
                e.preventDefault();

                const password = passwordInput.value;
                const confirmPassword = confirmPasswordInput.value;

                if (password !== confirmPassword) {
                    alert('两次输入的密码不一致');
                    return;
                }

                if (!document.getElementById('terms').checked) {
                    alert('请同意服务条款和隐私政策');
                    return;
                }

                // 使用过渡动画函数进入主页
                if (typeof playTransitionAnimation === 'function') {
                    // 如果login.js中的函数可用
                    playTransitionAnimation('index.html');
                } else {
                    // 降级处理，直接跳转
                    window.location.href = 'index.html';
                }
            });
        });

        // 密码强度检测函数
        function checkPasswordStrength(password) {
            // 空密码
            if (!password) {
                return { percent: 0, color: '#bfbfbf', text: '无' };
            }

            // 计算强度分数
            let score = 0;

            // 长度检查
            if (password.length >= 8) score += 1;
            if (password.length >= 12) score += 1;

            // 包含数字
            if (/\d/.test(password)) score += 1;

            // 包含小写字母
            if (/[a-z]/.test(password)) score += 1;

            // 包含大写字母
            if (/[A-Z]/.test(password)) score += 1;

            // 包含特殊字符
            if (/[^A-Za-z0-9]/.test(password)) score += 1;

            // 返回结果
            if (score <= 2) {
                return { percent: 33, color: '#ff4d4f', text: '弱' };
            } else if (score <= 4) {
                return { percent: 66, color: '#faad14', text: '中' };
            } else {
                return { percent: 100, color: '#1DB954', text: '强' };
            }
        }
    </script>
</body>

</html>